﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="css/amazeui.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/common.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style>
        *{
            padding: 0;
            border:0;
            margin: 0;
        }
        body{
            background: #efefef;
        }
        .veads1_i1{
            display: block;
            float: left;
            margin-top: 2%;
            width: 2.5%;
        }
        .veads1_s1{
            display: block;
            text-align: center;
            font-size: 1.8rem;

        }
    </style>
</head>
<body>
    <div id="order" v-cloak>
        <header data-am-widget="header" class="am-header am-header-default" style="background-color: #FFFFFF; border-bottom: 1px solid rgb(211, 211, 211);">
            <div class="am-header-left am-header-nav" onclick="goBack()">
                <a href="javascript:" class="">
                    <img class="am-header-icon-custom" src="images/veas07.png" alt="" />
                </a>
            </div>
            <h4 class="am-header-title" style=" color: black;">我的订单</h4>
            <div class="am-header-right am-header-nav"><a href="/Wap/Index.html" class="am-header-icon am-icon-home" style="color: #A9A9A9; "></a></div>
        </header>
        <div class="am-g" style="background: #fff;margin-bottom: 2%" v-for="list in orderList">
            <a href="javascript:" v-on:click="seeInfo(list.Id)">
                <div class="am-u-sm-12" style="padding: 0">
                    <ul class="am-list">
                        <li style="display: block;overflow: hidden;border-top: none;padding: 3% 4%">
                            <span style="float:left;">订单号：{{list.number}}</span>
                            <span style="font-size:1.5rem;float:right;color:#ff9129">{{list.State==0?"未付款":list.State==1?"已付款":list.State==-1?"已过期":list.State==-2?"已取消":"状态异常"}}</span>
                        </li>
                        <li style="display: block;overflow: hidden;border-bottom: none;padding: 2% 4% 0 4%">
                            <div style="font-size: 1.5rem;overflow: hidden;margin-bottom: 4%"><span style="float:left;">{{list.Venue.Name}}</span><span style="float:right;">{{list.createTime}}</span></div>
                            <div style="font-size: 1.5rem;overflow: hidden;margin-bottom: 4%"><img src="images/veas03.png" alt="" style="width: 4.5%;display: block;float: left;margin-right: 2%;margin-top: 0.5%;"><span style="font-size: 1.5rem">{{list.Venue.Adress}}</span></div>
                            <div style="font-size: 1.5rem;overflow: hidden;">
                                <img src="images/veas02.png" alt="" style="width: 4.5%;display: block;float: left;margin-right: 2%;margin-top: 0.5%;">
                                <span style="font-size: 1.5rem;float:left;">{{list.Venue.Phone}}</span>
                                <span style="float: right;font-size: 2rem;color: #23c788;margin-top: -2%">{{list.payMoney}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
</body>
<script src="js/zishiying.js"></script>

<script>
    var page=new Vue({
        el:'#order',
        data:{
            orderList:[],
        },
        methods:{
            getUserInfo:function () {
                var that=this;
                $.ajax({
                    type: 'POST',
                    url: apiUrl+'/Api/Mine/ReserveOrderList',
                    success: function (data) {
                        console.log(data);
                        if(data.errcode==0){
                            that.orderList=data.data.orderList;
                            //console.log(that.userinfo)
                        }else{
                            alert(data.errmsg);
                        }
                    },
                    //error:function () {
                    //    alert("服务器加载异常");
                    //}
                })
            },
            seeInfo:function(Id){
              location.href="orderdetails.html?Id="+Id;
            }
        }
    });
    $(function () {
        page.getUserInfo();
    })
</script>
</html>
